[VueJS] v-cloak 사용하는 방법, 감추기

VueJS의  v-cloak 디렉티브에 대하여 알아봅니다.

VueJS에 사용되는 v-clock은 내장 디렉티브로 VueJS에서 렌더딩 되기 이 전에 브라우저에서 감추는 역할을 합니다. 여기서 감춘다는 뜻은 감추고 보여주는 역할의 v-if 또는 v-show와는 다릅니다. 어떻게 다른지 알아보기 위해 먼저 v-cloak의 동작 방식을 알아야하겠죠.

1. 브라우저에서 페이지 소스를 로딩
2. VueJS 프레임워크를 실행
3. VueJS 처리 완료

위 과정에서 VueJS가 처리되기 이 전 화면에는 {{ }} 표현식 또는 v-if 등을 사용해 보여주지 않을 내용들이 그대로 노출되게 됩니다. Vue단에서 렌더링 되기 이 전 까지의 아주 잠깐이지만 어쩔 수 없는 과정입니다. 이를 피하기 위해서 바로  v-cloak을 사용하게 됩니다.

# VueJS v-cloak을 사용해 감추는 방법

v-cloak을 엘리먼트에 적용하면 VueJS의 처리가 완료된 후에 v-cloak 디렉티브를 스스로 제거하게 됩니다. 다시 말해서 태그에서는 v-cloak이라는 어트리뷰트를 제거하게되죠. 그래서 v-cloak에 안 보이도록 해주는 css인 display: none;을 추가하면 VueJS의 프로세스가 완료되기 전까지는 해당 엘리먼트가 화면에서 사용자에게 노출되지 않습니다.

그렇다면 어떻게 구현할 수 있을까요? 먼저 기능 구현을 위해 아래와 같이 v-cloak에 display: none을 사용해야합니다. 그래야 v-cloak이 적용된 태그 요소는 감춰지고 안보이게 됩니다.

그리고 적용할 태그에는 아래처럼 v-cloak 디렉티브를 추가합니다.

이제 VueJS가 모든 DOM 요소의 처리를 완료하면 그제서야 자동으로 v-cloak이 사라지고 적용되었던 태그 요소들이 화면에 출력되게됩니다. 위 예제는 v-if가 false이므로 v-cloak을 적용하여 VueJS가 로딩되기 이 전부터 안 나타나게 됩니다.

! v-cloak이 필요한 이유

꼭 사용하지 않아도 결과적으로 본다면 차이는 없습니다. 다만 렌더딩 과정에서 화면이 깜박거릴 수 있고 {{}}를 사용한 표현식이 미리 보이거나 안 보이도록 설정된 요소들도 잠깐 나타났다 사라지게되는 문제가 있습니다. 이런 이유로 가급적 v-cloak을 사용하는 것이 좋을 것 입니다.

# v-cloak을 사용하여 로딩 메시지로 바꾸기

v-cloak은 로딩 후에 자동으로 사라지게 됩니다. 이를 또 다른 방법으로 로딩메시지로 바꾸는 방법도 존재합니다. 참고로 알아두시면 좋을 것 같습니다. CSS style에 아래와 같이 적용하면 가상 선택자 ::before를 사용하여 Loading이라는 문구를 출력하고 그 뒤에 해당하는 모든 요소는 안보이도록 하는 간단한 방법입니다.

참고로 로딩중이라는 메시지가 한글이므로 CSS에 인코딩 설정을 하는 것이 좋습니다.